<template>
  <div id="login">
    <header>
      <span @click="returnTo">x</span>
      <span>帮助</span>
    </header>
    <div class="login-title">
      欢迎登录山姆外卖
    </div>
    <form>
      <div class="login-input">
        <input type="number" v-model="phone" placeholder="请输入手机号">
      </div>
      <div class="login-input">
        <input v-model="password" type="password" placeholder="请输入密码">
      </div>
      <div @click="submit" class="login-submit">
        登录
      </div>
    </form>
    <div class="login-register">
      <span @click="toRegister">注册</span>
    </div>

    <div class="login-protocol">
        <input v-model="read" type="checkbox">
        <span>我已阅读用户协议</span>
    </div>

    <div v-show="tips" class="login-tips">
      {{ tips }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'SamLogin',
  components: {

  },
  data() {
    return {
      phone:"",
      password:'', 
      read:false,
      tips:''
    }
  },
  mounted(){
    this.phone = this.$route.query.phone
  },
  methods: {
    returnTo() {
      this.$router.back()
    },
    toRegister() {
      this.$router.push('/register')
    },
    checkSubmit(){
      const phone = this.phone
      const psw = this.password
      const phoneReg =  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      this.tips = ''
      if(!phoneReg.test(phone)){
        this.tips = "您输入的手机号不正确！"
        return false
      }
      if(psw.length <5 || psw.length > 14){
        this.tips = '密码必须在6-14位数之间'
        return false
      }
      if(!this.read){
        this.tips = '请确认勾选用户协议'
        return false
      }
      return true
    },
    submit(){
      this.tips = ""
      if(this.checkSubmit()){
       const user = this.phone
       const psw = localStorage.getItem(user)
       console.log(psw);
       if(psw === null){
        this.tips = '该手机号未注册'
        return
       }
       if(this.password === psw){
        localStorage.setItem('status',user)
        this.$router.replace('/member')
       }else{
        this.tips = '用户名或者密码不正确'
       }
      }
    }
  }
};
</script>
<style lang='less' scoped>
#login {
  header {
    margin-top: 1rem;

    span {
      &:first-child {
        margin-left: 1rem;
        font-size: 1.5rem;
      }

      &:last-child {
        margin-left: 31rem;
        font-size: 1.3rem;

      }
    }
  }

  .login-title {
    font-size: 2.5rem;
    margin-left: 3rem;
    margin-top: 4rem;
    font-weight: bold;
  }

  .login-input {
    width: 30rem;
    height: 5rem;
    // background-color: red;
    margin: 0 auto;
    margin-top: 2rem;

    input {
      width: 30rem;
      height: 5rem;
      padding: 0;
      border: 0;
      border-bottom: 0.1rem solid gray;
      font-size: 1.5rem;

      &:focus {
        outline: none;
      }
    }
  }

  .login-protocol {
    margin-left: 4rem;
    font-size: 1.4rem;
    margin-top: 1rem;
    line-height: 2rem;
    margin-top: 27rem;
    margin-left: 12rem;

    input {
      zoom: 200%;
    }
  }

  .login-submit {
    text-align: center;
    width: 15rem;
    line-height: 4rem;
    border-radius: 0.5rem;
    margin: 0 auto;
    margin-top: 3rem;
    background-color: skyblue;
  }

  .login-register {
    width: 15rem;
    text-align: center;
    margin: 0 auto;
    font-size: 1.5rem;
    margin-top: 2rem;
    color: gray;
  }
  .login-tips{
    width: 16rem;
    position: absolute;
    top: 25.5rem;
    left: 3rem;
    font-size: 1.3rem;
    color: red;
    border: 0.1rem solid red;

  }
}</style>